<template>
  <div>
    <div class="header">
      <h4>线路管理</h4>
    </div>
    <div id="line" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import '@/echarts/china.js'
export default {

  mounted() {
    const line = echarts.init(document.getElementById('line'))
    var option
    var data = [
      {
        name: '北京',
        value: [116.24, 39.55, 100]
      },

      {
        name: '重庆',
        value: [106.54, 29.59]
      },
      {
        name: '浙江',
        value: [120.19, 30.26]
      }
    ]

    option = {
      geo: {
        map: 'china',
        layoutSize: '100%'

      },
      color: ['#ecdc7e'],
      series: [
        {
          type: 'map',
          mapType: 'china',
          layoutSize: '100%',
          // roam: true, //是否开启平游或缩放
          scaleLimit: {
            // 滚轮缩放的极限控制
            min: 1,
            max: 2
          },
          itemStyle: {
            normal: {
              areaColor: '#ecdc7e',
              borderColor: '#1cccff',
              borderWidth: 1.5
            },
            emphasis: {
              areaColor: '#02102b',
              label: {
                color: '#fff'
              }
            }
          }
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          symbolSize: 10,
          rippleEffect: {
            period: 3,
            scale: 5,
            brushType: 'fill'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#b3e2f2',
              fontWeight: 'bold',
              fontSize: 18
            }
          },

          data: data,
          itemStyle: {
            normal: {
              show: true,
              color: '#a68625',
              shadowBlur: 20,
              shadowColor: '#fff'
            },
            emphasis: {
              areaColor: '#f00'
            }
          }
        },
        {
          type: 'lines',
          zlevel: 1, // 设置这个才会有轨迹线的小尾巴
          polyline: true,
          effect: {
            show: true,
            period: 4,
            trailLength: 0.7,
            color: '#fff', // 流动点颜色
            symbol: 'arrow',
            symbolSize: 6
          },
          lineStyle: {
            normal: {
              color: '#fff', // 线条颜色
              width: 1.5,
              curveness: 0.2,
              shadowColor: '#fff'
            }
          },
          data: [
            {
              fromName: '北京',
              toName: '重庆',
              coords: [
                [116.24, 39.55, 100],
                [106.54, 29.59]
              ]
            },
            {
              fromName: '重庆',
              toName: '浙江',
              coords: [
                [106.54, 29.59],
                [120.19, 31.26]
              ]
            },
            {
              fromName: '浙江',
              toName: '北京',
              coords: [
                [120.19, 30.26],
                [116.24, 39.55, 100]
              ]
            }
          ]
        }

      ]
    }

    line.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
.header{
    h4{
        margin: 0;
    }
    display: flex;
    justify-content: space-between;
    .time{
    font-size: 14px;
    color: #818693;
    display: flex;
    -webkit-box-align: center;
    cursor: pointer;
    }
}
#line{
    width: 100%;
    height: 400px;
}
</style>
